<template>
	<view class="app-pages">
		<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
			width="100%" height="300rpx" />
		<view class="info">
			<view class="title">梅地亚中心</view>
			<view class="phone">联系电话: 18618391562</view>
		</view>
		<view class="time" @click="show = true">
			<view class="date">
				<view class="">07月06日 周五</view>
				<u-icon name="minus" color="rgb(144, 147, 153)" size="24" :customStyle="{margin:'0 12rpx'}"></u-icon>
				<view class="">07月08日 周日</view>
			</view>
			<view class="">共2晚</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="item in 3" :key="item">
				<view class="image">
					<u--image :showLoading="true" radius="8rpx" src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
						width="260rpx" height="260rpx" />
					<view class="live" v-if="item == 0">猜您喜欢</view>
				</view>
				<view class="content">
					<view class="title">标准双人间</view>
					<view class="introduce">无早餐，2张1.05单人床，2人入住 26~29平方米</view>
					<view class="tips">订单确认后，30分钟内免费取消</view>
					<view class="pirce-tips">
						<view class="">剩余5间</view>
						<view class="operation">
							<view class="line-through">￥692</view>
							<view class="price app-pirce-color">￥519</view>
							<view class="submit" @click="submit">预订</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="list-item">
				<view class="image">
					<u--image :showLoading="true" radius="8rpx" src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
						width="260rpx" height="260rpx" />
				</view>
				<view class="content">
					<view class="title">标准双人间</view>
					<view class="introduce">无早餐，2张1.05单人床，2人入住 26~29平方米</view>
					<view class="empty-tips">
						<view class="">已订完</view>
						<view class="price">￥778</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 日期 -->
		<u-calendar :show="show" color="#f74062" mode="range" @close="show = false" @confirm="confirm"></u-calendar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
			}
		},
		methods: {
			confirm(options){
				console.log(options)
				this.show = false
			},
			submit(){
				uni.navigateTo({
					url: '/homePages/hotel/reserve'
				})
			}
		},
		mounted() {

		}
	}
</script>
<style lang="scss" scoped>
	.list{
		.list-item{
			display: flex;
			padding: 30rpx 0;
			box-shadow: 0 1rpx #ccc;
			$h:260rpx;
			.image{
				position: relative;
				width: $h;
				height: $h;
				border-radius: 8rpx;
				.live{
					position: absolute;
					padding: 10rpx 20rpx;
					border-radius: 8rpx 0 8rpx 0;
					color: #FFFFFF;
					    top: 0;
					    left: 0;
						font-size: 30rpx;
					background: linear-gradient(to right bottom,rgb(225, 158, 0),rgb(225, 112, 0));
				}
			}
			.content{
				position: relative;
				height: $h;
				flex: 1;
				box-sizing: border-box;
				padding-left: 10rpx;
				.empty-tips{
					position: absolute;
					bottom: 0;
					left: 10rpx;
					right: 0;
					display: flex;
					justify-content: space-between;
					color: #999999;
					font-size: 30rpx;
				}
				.title{
					font-size: 32rpx;
					font-weight: bold;
				}
				.introduce{
					margin-top: 22rpx;
					height: 76rpx;
					overflow: hidden;
				}
				.pirce-tips{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
				}
				.operation{
					display: flex;
					align-items: center;
					.line-through{
						text-decoration: line-through;
						font-size: 24rpx;
					}
					
					.price{
						margin: 0 10rpx;
					}
					.submit {
						padding: 10rpx 25rpx;
						border-radius: 4rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						background-color: #f74062;
					}
				}
			}
		}
	}
	.time{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #0066CC;
		.date{
			display: flex;
			align-items: center;
		}
		padding-bottom: 25rpx;
		box-shadow: 0 1rpx #ccc;
	}
	.line-through{
		text-decoration: line-through;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
		.title{
			font-size: 30rpx;
			font-weight: bold;
		}
	}
</style>
